{% extends 'eform_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}
    <title>Convert Eform</title>
{% endblock title %}
    


{% block head %}

<!-- <link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'> -->
<link rel='stylesheet' href="{% static 'eform/formio.full.min.css' %}">
{% comment %} <link rel='stylesheet' href="{% static 'eform/toggle/bootstrap-toggle.min.css' %}"> {% endcomment %}
<style>
    body{
        background-image: none;
        background-color: white;
    }

    .console{
        color:  #39ff14! important;
        background: #111111! important;
        border:0;
        padding:1rem;
    }
{% comment %} 
    .toggle-on{
        background-color:#43ac6a !important;
    }
    .toggle-off{
        background-color:#f04124 !important;
        border:0;
        color:white !important;
    } {% endcomment %}
</style>
{% endblock head %}


{% block body %}
{% csrf_token %}
<div class="container mt-3">

    <div class="card bg-dark text-white">

        <div class="card-body ">
            <h5>Select Eform to Convert</h5>
            {% comment %} <div class="form-check form-check-inline mt-0">
                <label class="form-check-label text-white mr-3">
                    <input class="form-check-input" type="radio" name="datalist" id="" value="checkedValue"> All
                </label>
                <label class="form-check-label text-white mr-3">
                    <input class="form-check-input" type="radio" name="datalist" id="" value="checkedValue"> Not Converted
                </label>
            </div> {% endcomment %}
            <div id="message_container" class="w-100 mt-3 d-none console overflow-auto" style="height:280px;">
                <div id="message">
                </div>
                <div id="spinner" class="d-none">
                    <i class="fa fa-spinner fa-pulse text-white" aria-hidden="true"></i>
                </div>
            </div>
                <div class="row mt-3">
                    <div class="col ">
                        <label>
                            <input type="checkbox" id="overwrite"
                             data-width="145" data-height="38" 
                             data-offstyle="dark" data-onstyle="success" data-toggle="toggle">
                        
                        </label>
                    </div>
                </div>
            <button type="button" class="btn btn-primary mt-3" id="convert"> <i class="fas fa-exchange-alt    "></i> Convert</button>
            <a name="" id="" class="btn btn-primary mt-3" href="{% url 'eform:eformCSV' %}" role="button"> <i class="fas fa-file-csv    "></i> Export CSV</a>
            <br>
            <br>
            <h5><i class="fas fa-filter    mr-2"></i>Filter</h5>
            <a name="" id="" class="btn btn-{% if not request.GET.s or request.GET.s == 'n' %}success {% else %}primary {% endif %}" href="?s=n" role="button">Not Converted</a>
            <a name="" id="" class="btn btn-{% if request.GET.s and request.GET.s == 'd' %}success {% else %}primary {% endif %}" href="?s=d" role="button">Done Only</a>
            <a name="" id="" class="btn btn-{% if request.GET.s and request.GET.s == 'c' %}success {% else %}primary {% endif %}" href="?s=c" role="button">Converted</a>
            <a name="" id="" class="btn btn-{% if request.GET.s and request.GET.s == 'a' %}success {% else %}primary {% endif %}" href="?s=a" role="button">ALL</a>
            <table class="table text-white mt-3">
                <tr>
                    <th class="text-center">
                        <input type="checkbox" id="select_all"> ALL
                    </th>
                    <th>
                        Form ID
                    </th>
                    <th>
                        Form Title
                    </th>   
              
                    <th>
                        Converted
                    </th>

                    <th>
                        User
                    </th>
                    
                </tr>
                
                {% for ef in eform %}
                
                    <tr id="tr-{{ef.id}}">
                        <th class="text-center">
                            <input type="checkbox" class="eform_checkbox" data-id="{{ef.id}}">
                        </th>
                        <td>
                            {{ef.id}}
                        </td>
                        <td>
                            {{ef.eformSchema.title}}
                        </td>               
                    
                        <td>
                            {{ef.converted}}
                        </td>
                        
                        <td>
                            {{ef.doneby}}
                        </td>
                    </tr>
                {% empty %}
                <tr class="text-center">
                    <td colspan="5">No Unconvert EForm</td>
                </tr>
                {% endfor %}
            </table>
            
        </div>
    </div>
    
    
</div>
{% endblock body %}


{% block script %}
<link href="{% static 'eform/toggle/bootstrap4-toggle.min.css' %}" rel="stylesheet">
<script src="{% static 'eform/toggle/bootstrap4-toggle.min.js' %}"></script>
<!-- <script src='https://cdn.form.io/formiojs/formio.full.min.js'></script> -->
<script>
    const convert_url = `{% url 'eform:eformConvertAPI' %}`
    $('#overwrite').bootstrapToggle(
        {
            on:"Overwrite On",
            off:"Overwrite Off",
        }
    );
</script>
<script src="{% static 'eform/eformConvert.js' %}">

</script>
{% endblock script %}